<template>
  <div class="app-container">

    <div>
      <div class="noticeTitle">{{noticeMain.noticeTitle}}</div>
      <div class="createBy"><span class="font">发布时间：{{noticeMain.createTime}}</span><span class="font">发布人：{{noticeMain.createBy}}</span></div>
    </div>
    <div class="" >
      <div  class="notice " v-html="noticeMain.noticeContent" data-slate-editor></div>
    </div>
  </div>
</template>

<script>
import {getNoticeToUser} from"@/api/noticeToUser/noticeToUser";
import {deptTreeSelect} from "@/api/system/user";
import '@wangeditor/editor/dist/css/style.css'

export default {
  name: "NoticeToUser",
  dicts: ['sys_notice_status', 'sys_notice_type'],
  data() {
    return {
      // 遮罩层
      loading: true,
      noticeId:null,
      noticeMain: {

      },

    };
  },
  created() {
    const noticeId = this.$route.params && this.$route.params.noticeId;
    this.getNoticeById(noticeId)
  },

  methods: {

    getNoticeById(noticeId){
      getNoticeToUser(noticeId).then(res=>{
        this.noticeMain=res.data;
      })
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
      let html = editor.getHtml();

      // 创建一个新的DOM解析器
      let parser = new DOMParser();

      // 使用解析器解析HTML字符串
      let doc = parser.parseFromString(html, "text/html");

      // 获取所有的表格元素
      let tables = doc.getElementsByTagName("table");

      // 遍历所有的表格元素并添加边框样式
      for (let i = 0; i < tables.length; i++) {
        tables[i].style.borderTop = "1px solid #ccc";
        tables[i].style.borderLeft = "1px solid #ccc";

        // 获取表格中的所有td和th元素
        let cells = tables[i].querySelectorAll("td, th");

        // 遍历所有的td和th元素并添加边框样式
        for (let j = 0; j < cells.length; j++) {
          cells[j].style.borderBottom = "1px solid #ccc";
          cells[j].style.borderRight = "1px solid #ccc";
          cells[j].style.padding = "3px 5px";
          cells[j].style.textAlign = "center";
        }

        // 获取表格中的所有th元素并添加边框样式
        let ths = tables[i].querySelectorAll("th");
        for (let k = 0; k < ths.length; k++) {
          ths[k].style.borderBottom = "1px solid #ccc";
        }
      }

      // 将修改后的HTML内容转换回字符串
      html = new XMLSerializer().serializeToString(doc);

      // 更新编辑器的HTML内容
      this.html = html;
    },


  }
};
</script>

<style lang="scss" scoped>
.noticeTitle{
  font-size: 28px;
  word-wrap: break-word;
  color: #222226;
  font-weight: 600;
  margin: 0;
  word-break: break-all;
}
.notice{

  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
}
.createBy{
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 30px;
  padding: 5px;
  display: flex;
  position: relative;
  align-items: center;
  background: #f8f8f8;
  border-radius: 4px;
  .font{
    padding: 5px;
    color: #999aaa;
    margin-right: 20px;
  }

}
/* table 样式 */
.notice.table {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.notice.table td,
.notice.table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.notice.table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.notice.blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}


</style>

